<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        <p><button v-on:click="fun">按一下</button></p>
        <p><button @click="fun1">再按一下</button></p>
        <p><input type="text" @keydown="fun2('吹吧')"></p>
        <p><input type="text" @keydown.13="fun3()"></p>
        <p><input type="text" @keydown.enter="fun3()"></p>
        <select v-model = "select">
            <option disabled>---请选择---</option>
            <option>林志玲</option>
            <option>贾玲</option>
            <option>关凌</option>
        </select>
        <p>
            您选择的是：{{select}}
        </p>

        <ul>
            <li v-for="(item,index) in arr">{{index+1}}:{{item}}</li>
        </ul>

        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <td>{{index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"<h1>刘老师</h1>",
                select:"",
                arr:[{
                        name:"林志玲",
                        age:18
                     },
                     {
                         name:"贾玲玲玲",
                         age:48
                     }]
            },
            methods: {
                // fun:function(){
                //     alert("太帅了");
                // }
                fun(){
                    alert("实在是太帅了");
                },
                fun1(){
                    alert("自己认为的")
                },
                fun2(msg){
                    alert(msg)
                },
                fun3(){
                    alert("您按了回车")
                }
            }
        })
    </script>
</body>
</html>